<template>
    <div class="tag-info">
        <label
            :style="{
                width: labelWidth,
                textAlign: labelAlign
            }"
        >
            {{ label }}{{ labelSuffix }}
        </label>
        <div class="tags">
            <el-tag
                :class="{ 'is-checked': tagsList.checked.includes(tag) }"
                :key="idx"
                v-for="(tag, idx) in tagsList['data']"
                :closable="!tagsList.checked.includes(tag)"
                :disable-transitions="false"
                @click="checkTag(tag)"
                @close="handleClose(tag)"
            >
                {{ tag }}
            </el-tag>
            <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加要素</el-button>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    name: "tag-info",
    model: {
        prop: "value",
        event: "change"
    },
    props: {
        value: {
            type: Object,
            default() {
                return {
                    data: [],
                    checked: []
                };
            }
        },
        valueKey: {
            type: String
        },
        label: String,
        // label 宽度
        "label-width": {
            type: String,
            default: "auto"
        },
        // label 对齐方式
        "label-align": {
            type: String,
            default: "right"
        },
        // label 后缀
        "label-suffix": String
    },
    data() {
        return {
            inputVisible: false,
            inputValue: ""
        };
    },
    computed: {
        tagsList: function () {
            return Object.assign({}, this.value);
        },
        ...mapState(["constant"])
    },
    methods: {
        handleClose(tag) {
            this.tagsList["data"].splice(this.tagsList["data"].indexOf(tag), 1);

            if (this.tagsList["checked"] == tag) {
                this.tagsList["checked"] = [];
            }

            this.$emit("change", this.tagsList);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick((_) => {
                this.$refs.saveTagInput.$refs.input.focus();
                this.$emit("change", this.tagsList);
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            let index_in_tags = -1;
            if (inputValue) {
                if (!_.isEmpty(this.tagsList) && this.tagsList["data"]) {
                    index_in_tags = this.tagsList["data"].indexOf(inputValue);

                    if (index_in_tags == -1) {
                        this.$set(this.tagsList, "data", [...this.tagsList["data"], inputValue]);
                    } else {
                        this.$message.warning("标签名称重复");
                    }
                } else {
                    this.$set(this, "tagsList", {
                        data: [inputValue],
                        checked: []
                    });
                }
            }
            this.inputVisible = false;
            this.inputValue = "";
            this.$emit("change", this.tagsList);
        },
        checkTag(tag) {
            const _i = this.tagsList.checked.findIndex((item) => item === tag);
            if (_i < 0) {
                if (this.constant.only_ys.includes(this.valueKey)) {
                    this.tagsList["checked"] = [tag];
                } else {
                    this.tagsList["checked"].push(tag);
                }
            } else {
                this.tagsList.checked.splice(_i, 1);
            }
            this.$emit("change", this.tagsList);
        }
    }
};
</script>
<style lang="scss" scoped>
.el-tag {
    margin-right: 10px;
    height: 26px;
    line-height: 26px;
    margin-bottom: 10px;

    &:hover {
        cursor: pointer;
    }

    &.is-checked {
        /*color: #409eff;*/
        /*border-color: #409eff;*/
        /*background-color: #ecf5ff;*/
        border-color: #fdb933;
        background-color: rgba(253, 185, 51, 0.7);
    }
}

.button-new-tag {
    margin-right: 10px;
    height: 26px;
    line-height: 26px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    height: 26px !important;
    line-height: 26px !important;
    margin-right: 10px;
}

.tag-info {
    display: flex;
    // align-items: center;
    // margin-bottom: 10px;
    label {
        display: block;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        text-align: right;
    }

    .tags {
        flex: 1;
        padding-bottom: 10px;
    }
}
</style>
